import React from 'react';

import BoxItem from '../../../components/BoxItem';
import BorderTable from '../components/BorderTable';

import { Button, DatePicker, Form, Input, Select } from 'antd';

const { RangePicker } = DatePicker;

export default function InboundDetails() {
	const columns = [
		{ title: '单据编码', dataIndex: 'documentCode', key: 'documentCode' }, // documentCode
		{ title: '关联业务号', dataIndex: 'businessNumber', key: 'businessNumber' }, // businessNumber
		{ title: '往来单位', dataIndex: 'counterparty', key: 'counterparty' }, // counterparty
		{ title: '入库类型', dataIndex: 'outboundType', key: 'outboundType' }, // outboundType
		{ title: '入库仓库', dataIndex: 'outboundWarehouse', key: 'outboundWarehouse' }, // outboundWarehouse
		{ title: '实际入库量', dataIndex: 'actualOutboundQty', key: 'actualOutboundQty' }, // actualOutboundQty
		{ title: '入库时间', dataIndex: 'outboundTime', key: 'outboundTime' }, // outboundTime
		{ title: '备注', dataIndex: 'remarks', key: 'remarks' } // remarks
	];

	const dataSource = [
		{
			key: '1',
			documentCode: 'A001',
			businessNumber: 'B001',
			counterparty: 'Company A',
			outboundType: 'Type1',
			outboundWarehouse: 'Warehouse1',
			actualOutboundQty: 100,
			outboundTime: '2024-11-01',
			remarks: 'Remark 1'
		},
		{
			key: '2',
			documentCode: 'A002',
			businessNumber: 'B002',
			counterparty: 'Company B',
			outboundType: 'Type2',
			outboundWarehouse: 'Warehouse2',
			actualOutboundQty: 200,
			outboundTime: '2024-11-02',
			remarks: 'Remark 2'
		},
		{
			key: '3',
			documentCode: 'A003',
			businessNumber: 'B003',
			counterparty: 'Company C',
			outboundType: 'Type3',
			outboundWarehouse: 'Warehouse3',
			actualOutboundQty: 300,
			outboundTime: '2024-11-03',
			remarks: 'Remark 3'
		},
		{
			key: '4',
			documentCode: 'A004',
			businessNumber: 'B004',
			counterparty: 'Company D',
			outboundType: 'Type4',
			outboundWarehouse: 'Warehouse4',
			actualOutboundQty: 400,
			outboundTime: '2024-11-04',
			remarks: 'Remark 4'
		},
		{
			key: '5',
			documentCode: 'A005',
			businessNumber: 'B005',
			counterparty: 'Company E',
			outboundType: 'Type5',
			outboundWarehouse: 'Warehouse5',
			actualOutboundQty: 500,
			outboundTime: '2024-11-05',
			remarks: 'Remark 5'
		},
		{
			key: '6',
			documentCode: 'A006',
			businessNumber: 'B006',
			counterparty: 'Company F',
			outboundType: 'Type6',
			outboundWarehouse: 'Warehouse6',
			actualOutboundQty: 600,
			outboundTime: '2024-11-06',
			remarks: 'Remark 6'
		},
		{
			key: '7',
			documentCode: 'A007',
			businessNumber: 'B007',
			counterparty: 'Company G',
			outboundType: 'Type7',
			outboundWarehouse: 'Warehouse7',
			actualOutboundQty: 700,
			outboundTime: '2024-11-07',
			remarks: 'Remark 7'
		},
		{
			key: '8',
			documentCode: 'A008',
			businessNumber: 'B008',
			counterparty: 'Company H',
			outboundType: 'Type8',
			outboundWarehouse: 'Warehouse8',
			actualOutboundQty: 800,
			outboundTime: '2024-11-08',
			remarks: 'Remark 8'
		},
		{
			key: '9',
			documentCode: 'A009',
			businessNumber: 'B009',
			counterparty: 'Company I',
			outboundType: 'Type9',
			outboundWarehouse: 'Warehouse9',
			actualOutboundQty: 900,
			outboundTime: '2024-11-09',
			remarks: 'Remark 9'
		},
		{
			key: '10',
			documentCode: 'A010',
			businessNumber: 'B010',
			counterparty: 'Company J',
			outboundType: 'Type10',
			outboundWarehouse: 'Warehouse10',
			actualOutboundQty: 1000,
			outboundTime: '2024-11-10',
			remarks: 'Remark 10'
		}
	];
	return (
		<div>
			<BoxItem>
				<Button size="large" style={{ marginRight: '20px' }}>
					导入
				</Button>
				<Button size="large">导出</Button>
			</BoxItem>
			<BoxItem>
				<Form
					layout="inline" // 使用 inline 布局使所有字段并排显示
					style={{ maxWidth: '100%' }}
				>
					<Form.Item
						label="关键词"
						style={{ width: '300px', marginBottom: '20px' }}
						wrapperCol={{ span: 17 }}
					>
						<Input placeholder="请输入往来单位或单据号" />
					</Form.Item>
					<Form.Item label="入库类型" style={{ width: '280px' }} wrapperCol={{ span: 17 }}>
						<Select defaultValue="请选择">
							<Select.Option value="未盘点">未盘点</Select.Option>
							<Select.Option value="盘点中">盘点中</Select.Option>
							<Select.Option value="已完成">已完成</Select.Option>
							<Select.Option value="已调帐">已调帐</Select.Option>
						</Select>
					</Form.Item>
					<Form.Item label="入库仓" style={{ width: '280px' }} wrapperCol={{ span: 19 }}>
						<Select defaultValue="请选择">
							<Select.Option value="未盘点">未盘点</Select.Option>
							<Select.Option value="盘点中">盘点中</Select.Option>
							<Select.Option value="已完成">已完成</Select.Option>
							<Select.Option value="已调帐">已调帐</Select.Option>
						</Select>
					</Form.Item>
					<Form.Item label="入库仓" style={{ width: '350px' }} wrapperCol={{ span: 20 }}>
						<RangePicker></RangePicker>
					</Form.Item>
					<Form.Item style={{ width: '400px' }} wrapperCol={{ span: 20 }}>
						<Button style={{ marginRight: '20px' }}>今</Button>
						<Button style={{ marginRight: '20px' }}>昨</Button>
						<Button style={{ marginRight: '20px' }}>近7天</Button>
						<Button>近30天</Button>
					</Form.Item>
					<Form.Item>
						<Button type="primary" style={{ marginRight: '20px' }}>
							搜索
						</Button>
						<Button>重置</Button>
					</Form.Item>
				</Form>
			</BoxItem>
			<BoxItem>
				<BorderTable columns={columns} dataSource={dataSource} />
			</BoxItem>
		</div>
	);
}
